<!--
 * @Description: 
 * @Author: william
 * @Date: 2024-08-30 17:23:26
 * @LastEditors: william
 * @LastEditTime: 2025-11-10 16:13:23
-->
<template>
  <up-tabbar
    :value="value"
    :fixed="true"
    :placeholder="false"
    :safeAreaInsetBottom="true"
  >
    <up-tabbar-item
      :name="item.name"
      v-for="item in tabbarList"
      :key="item.pagePath"
      @click="handleTabbarItemClick(item)"
    >
      <template #inactive-icon>
        <image class="uw-tabbar-icon" :src="item.icon"></image>
      </template>
      <template #active-icon>
        <image class="uw-tabbar-icon" :src="item.selectedIcon"></image>
      </template>
      <template #text>
        <text class="uw-tabbar-text" :class="{ active: value === item.name }">
          {{ item.text }}
        </text>
      </template>
    </up-tabbar-item>
  </up-tabbar>
</template>

<script setup>
defineOptions({
  name: 'Tabbar',
  inheritAttrs: false
})

const props = defineProps({
  value: {
    type: String,
    default: ''
  }
})

// 底部tabbar参数
const tabbarList = ref([])

watch(
  () => g_i18n.global.locale.value,
  (nv, ov) => {
    tabbarList.value = [
      {
        pagePath: '/pages/cooking/index',
        text: g_t('pages.cooking'),
        name: 'cooking',
        icon: getViteImageUrl('tabbar/cooking.png'),
        selectedIcon: getViteImageUrl('tabbar/cookingSelected.png')
      },
      {
        pagePath: '/pages/recipe/index',
        text: g_t('pages.recipe'),
        name: 'recipe',
        icon: getViteImageUrl('tabbar/recipe.png'),
        selectedIcon: getViteImageUrl('tabbar/recipeSelected.png')
      },
      {
        pagePath: '/pages/manual/index',
        text: g_t('pages.manual'),
        name: 'manual',
        icon: getViteImageUrl('tabbar/manual.png'),
        selectedIcon: getViteImageUrl('tabbar/manualSelected.png')
      },
      {
        pagePath: '/pages/system/index',
        text: g_t('pages.system'),
        name: 'system',
        icon: getViteImageUrl('tabbar/system.png'),
        selectedIcon: getViteImageUrl('tabbar/systemSelected.png')
      }
    ]
  },
  {
    immediate: true
  }
)

const handleTabbarItemClick = item => {
  uni.reLaunch({
    url: item.pagePath
  })
}
</script>

<style lang="scss" scoped>
// up-tabbar 底部导航栏样式
:deep(.u-tabbar__content__item-wrapper) {
  height: 80rpx !important;
  background-color: var(--body-theme);
  box-shadow: 0 -1rpx 4rpx rgba(0, 0, 0, 0.1);
}
:deep(.u-border-top) {
  border-top-width: 1rpx !important;
  z-index: 100 !important;
}
.uw-tabbar-icon {
  /* #ifdef H5 || MP-WEIXIN */
  flex-shrink: 0;
  /* #endif */
  width: 32rpx;
  height: 32rpx;
}
.uw-tabbar-text {
  height: 18rpx;
  margin-top: 5rpx;
  font-size: 19rpx;
  color: var(--color-000);
  &.active {
    color: var(--main-theme);
  }
}
</style>
